<template>
	<view class="pages" :style="{ paddingBottom: paddingHight+'px' }">
		<u-checkbox-group v-model="checked" iconPlacement="right" placement="column" shape="circle"
			@change="checkboxChange">
			<view class="item_box" v-for="item in list" :key="item.id">
				<u-checkbox :label="item.taskName" :name="item.id" labelColor="#000"></u-checkbox>
			</view>
		</u-checkbox-group>
		<div class="footer_box" ref="buttonRef" id="buttonRef">
			<u-button color="#00B6FC" shape="circle" @click="save">保存</u-button>
		</div>
	</view>
</template>

<script>
	import {
		taskList,
		selectTask,
		appList,
		keepApp
	} from '@/api/api.js'
	export default {
		data() {
			return {
				checked: [],
				paddingHight: 0,
				list: [],
				formData: [],
				title: ''
			};
		},
		mounted() {

			// this.paddingHight = this.$refs.buttonRef.offsetHeight + 4 + 'px'
			// console.log(this.paddingHight);
			this.setHight()
		},
		onLoad(item) {
			uni.setNavigationBarTitle({
				title: item.title
			});
			this.title = item.title
			if (item.title === '任务列表') {
				this.init(item.phoneId)
			} else {
				this.initApp(item.phoneId)
			}
		},
		methods: {
			setHight() {
				this.$nextTick(function() {
					let query = uni.createSelectorQuery().in(this);
					query.select('#buttonRef').boundingClientRect();
					query.exec(res => {
						this.paddingHight = res[0].height
					});

				})
			},
			init(phoneId) {
				taskList({
					phoneId
				}).then(res => {
					if (res.code === 10000) {
						this.list = res.data
					}
				})
			},
			initApp(phoneId) {
				appList({
					phoneId
				}).then(res => {
					if (res.code === 10000) {
						this.list = res.data.map(e => ({
							...e,
							taskName: e.appName,
							id: e.uid
						}))
					}
				})
			},
			checkboxChange(value) {
				this.formData = []
				this.formData = this.list.filter(e => {
					if (value.includes(e.id)) {
						return e
					}
				})

			},
			save() {
				if (this.title === '任务列表') {
					selectTask({
						taskList: this.formData
					}).then(res => {
						if (res.code === 10000) {
							uni.switchTab({
								url: '/pages/index/index'
							})
						}
					})
				} else {
					keepApp({
						appList: this.formData
					}).then(res => {
						if (res.code === 10000) {
							uni.switchTab({
								url: '/pages/index/index'
							})
						}
					})
				}

			}
		}
	}
</script>

<style lang="scss">
	.pages {
		position: relative;
		height: 100vh;
		overflow-y: auto;
		background: #fff;
	}

	.item_box {
		padding: 10px;
		margin: 20rpx 34rpx;
		background: #F5F6F7;
		border-radius: 12rpx;
	}

	.footer_box {
		background: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 18px 24px;
	}
</style>
